<template>
  <div>
    <TopFilter ref="formpanel" :list="formList" :cols="4" labelWidth="80" :collapse="false" @filterChange="changeHandle"></TopFilter>
    <!-- :rows="2" -->
    <!-- @formChange="formchangeFun" -->
    <br />
    <br />
    <FilterTable
      ref="table"
      :columns="columns"
      :isColumnFilter="false"
      columnsRef="partPartOtherPartCirculateHandleBorrowInSelectPart"
      :isToperInfo="false"
      :params="fetchParams"
      :datakey="'rows'"
      height="200"
      :onSyncTableData="changetablelist"
      :onRowSelectChange="columns => (this.columns = columns)"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <!-- :fetchapi="fetchApi" -->
      <!-- <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandle">新增</el-button>
      </template>-->
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button type="primary" @click="alterSave">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';

export default {
  mixins: [dictionary],

  data() {
    return {
      formList: this.createFrom(),
      columns: this.createTableColumns(),
      fetchParams: {}
    };
  },

  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partCode'
        },
        {
          type: 'INPUT',
          label: '配件名称',
          fieldName: 'partName'
        },
        {
          type: 'INPUT',
          label: '拼音码',
          fieldName: 'py'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          align: 'center',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        // {
        //   title: '操作',
        //   dataIndex: 'column-action',
        //   // width: 150,
        //   fixed: 'left',
        //   align: 'center',
        //   render: props => {
        //     return (
        //       <div>
        //         <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
        //           编辑
        //         </el-button>
        //         <el-button size="mini" type="text" onClick={() => this.delLabour(props.row)}>
        //           删除
        //         </el-button>
        //       </div>
        //     );
        //   }
        // },
        {
          title: '配件代码',
          dataIndex: 'partCode',
          sorter: true,
          filter: true
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          sorter: true,
          filter: true
        },
        {
          title: '原厂',
          dataIndex: 'batchNumber',
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{this.createDictText(props.row.billTypeCode, '8210')}</span>;
          // }
        },
        {
          title: '保质期',
          dataIndex: 'operatorCode',
          sorter: true,
          filter: true
        },
        {
          title: '采购单价',
          dataIndex: 'remark3',
          sorter: true,
          filter: true
        },
        {
          title: '数量',
          dataIndex: 'number',
          sorter: true,
          filter: true,
          editable: true,
          editType: 'input'
        },
        {
          title: '计量单位',
          dataIndex: 'unitMeasurement',
          sorter: true,
          filter: true
        },
        {
          title: '套件',
          dataIndex: 'remark1',
          sorter: true,
          filter: true
        },
        {
          title: '成本单价',
          dataIndex: 'remark2',
          sorter: true,
          filter: true
        },
        {
          title: '原单配件代码',
          dataIndex: 'remark4',
          sorter: true,
          filter: true
        },
        {
          title: '原单配件批号',
          dataIndex: 'remark5',
          sorter: true,
          filter: true
        },
        {
          title: '原单配件保质期',
          dataIndex: 'remark6',
          sorter: true,
          filter: true
        },
        {
          title: '保质期截至日期',
          dataIndex: 'expirationDate',
          sorter: true,
          filter: true
        }
      ];
    },

    changeHandle() {},
    editHandle() {},
    delLabour() {},
    changetablelist() {},
    // addHandle() {},
    alterSave() {},
    closeDialog(param) {
      this.$emit('close', false);
    }
  }
};
</script>
